import React, { Component } from 'react';
import Store from '../Store';
import { observer } from 'mobx-react';
@observer
class Product extends Component {
  componentDidMount() {
    Store.fetchProduct();
  }
  // getData() {
  //   Store.fetchProduct();
  // }
  getCart(item) {
    console.log(item.id);
    Store.addCart(item);
  }
  render() {
    console.log(Store);
    let lis;
    try {
      lis = Store.product.data.map(item => (
        <li key={item.id}>
          <span>商品名称:</span>
          <b>{item.title}</b>
          &nbsp; &nbsp;
          <span>商品价格:</span>
          <b>{item.price}</b>
          &nbsp; &nbsp;
          <span>库存:</span>
          <span>{item.inventory}</span>
          &nbsp; &nbsp;
          <button onClick={this.getCart.bind(this, item)} disabled={!item.inventory}>
            添加购物车
          </button>
        </li>
      ));
    } catch (e) {}

    return (
      <fieldset>
        <legend>商品</legend>
        <ul>{lis}</ul>
        {/* <button onClick={this.getData.bind(this)}>点击获取购物车数据</button> */}
      </fieldset>
    );
  }
}

export default Product;
